<template>
	<div class="wrap" :class="step==2?'step2':''" style="margin-top: 10px;">
		<p style="margin-bottom: 16px;" v-if="merchantType==5">
			<el-radio-group v-model="obj.merchant" size="medium">
				<template v-if="scene=='addMember'">
					<el-radio-button v-if="phoneAndFeeInfo.dxnum" :label="1">电信</el-radio-button>
					<el-radio-button v-if="phoneAndFeeInfo.ydnum" :label="2">移动</el-radio-button>
				</template>
				<el-radio-button v-if="scene=='addGroup'&&(phoneAndFeeInfo.ydnum||phoneAndFeeInfo.dxnum)" :label="0">移动/电信</el-radio-button>
				<el-radio-button v-if="phoneAndFeeInfo.ltnum" :label="3">联通</el-radio-button>
			</el-radio-group>
		</p>
		<p style="margin-bottom: 16px;" v-if="scene=='addMessage'">
			<el-radio-group v-model="obj.merchant" size="medium">
				<el-radio-button :label="4">三网</el-radio-button>
				<el-radio-button :label="1">电信</el-radio-button>
				<el-radio-button :label="2">移动</el-radio-button>
				<el-radio-button :label="3">联通</el-radio-button>
			</el-radio-group>
		</p>
		<template v-if="step==1">
			<!--<div class="edit-types" v-if="scene=='addMessage'">
				<p class="edit-type" @click="messageTypeChange(1)" :class="messageType==1?'selected-type':''">文字短信</p>
				<p class="edit-type" @click="messageTypeChange(2)" :class="messageType==2?'selected-type':''">视频短信</p>
			</div>-->
			<div class="edit-types" v-if="(scene=='addMember'&&merchantType==5)&&(obj.merchant==3||obj.merchant==4||([0,1,2].indexOf(obj.merchant)>-1&&templateList.length))">
				<p class="edit-type" @click="editTypeChange(0)" :class="tabIndex==0?'selected-type':''">已有模板</p>
				<p class="edit-type" v-if="obj.merchant==1||obj.merchant==2" @click="editTypeChange(1)" :class="tabIndex==1?'selected-type':''">新增模板</p>
			</div>
			
			<template v-if="tabIndex==0">
				<div class="template-list">
					<template v-if="(obj.merchant==1||obj.merchant==2)||(obj.merchant==3&&scene=='resetTemplate')">
						<p class="no-data" v-if="!loading&&!templateList.length">暂无短信模板</p>
						<div class="template-box" @click="selectTemplate(item)" :class="templateId===item.hanguptemplateid?'selected-template':''" v-for="(item,index) in templateList">
							<div class="template-item clear">
								<p class="template-item-title">短信名称：</p>
								<div class="template-item-content">{{item.smstitle}}</div>
							</div>
							<div class="template-item clear">
								<p class="template-item-title">短信内容：</p>
								<div class="template-item-content">{{item.smstextcontent}}</div>
							</div>
							<div style="margin-top: 12px;" class="flex" v-if="messageType==2">
								<div class="template-item clear flex-grow" v-if="item.smsvideoimg">
									<p class="template-item-title">图片：</p>
									<div class="template-item-content">
										<div class="image-wrap">
											<img @click="viewImage(item.smsvideoimg)" :src="item.smsvideoimg" />
										</div>
									</div>
								</div>
								<div class="template-item clear flex-grow" v-if="item.smsvideocontent">
									<p class="template-item-title">视频：</p>
									<div class="template-item-content">
										<div class="image-wrap">
											<video :src="item.smsvideocontent"></video>
											<div class="cover">
												<i @click="playVideo(item.smsvideocontent)" class="el-icon-video-play center"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</template>

					<div class="template-box" v-if="(obj.merchant==3||obj.merchant==4)&&scene!='resetTemplate'" @click="selectTemplate(item)" :class="templateId===item.hanguptemplateid?'selected-template':''" v-for="(item,index) in defaultTemplateList1">
						<div class="template-item clear">
							<p class="template-item-title">短信内容：</p>
							<div class="template-item-content flex" v-if="groupname&&linkphone">
								{{item.smstextcontent.replace('{集团名称}', groupname).replace('{联系电话}', linkphone)}}
								<el-input ref="extraText" :maxlength="extraTextLength" show-word-limit size="mini" style="width: 400px;font-size: 16px;" v-model="extraText" v-if="(obj.merchant==3||obj.merchant==4)&&templateId==1&&index==0"></el-input>
							</div>
							<div class="template-item-content flex" v-if="groupname&&!linkphone">
								{{item.smstextcontent.replace('{集团名称}', groupname)}}
								<el-input ref="extraText" :maxlength="extraTextLength" show-word-limit size="mini" style="width: 400px;" v-model="extraText" v-if="(obj.merchant==3||obj.merchant==4)&&templateId==1&&index==0"></el-input>
							</div>
							<div class="template-item-content flex" v-if="!groupname&&linkphone">
								{{item.smstextcontent.replace('{联系电话}', linkphone)}}
								<el-input ref="extraText" :maxlength="extraTextLength" show-word-limit size="mini" style="width: 400px;" v-model="extraText" v-if="(obj.merchant==3||obj.merchant==4)&&templateId==1&&index==0"></el-input>
							</div>
							<div class="template-item-content flex" v-if="!groupname&&!linkphone">
								{{item.smstextcontent}}
								<el-input ref="extraText" :maxlength="extraTextLength" show-word-limit size="mini" style="width: 400px;" v-model="extraText" v-if="(obj.merchant==3||obj.merchant==4)&&templateId==1&&index==0"></el-input>
							</div>
						</div>
						<div style="margin-top: 12px;" class="flex" v-if="messageType==2">
							<div class="template-item clear flex-grow" v-if="item.smsvideoimg">
								<p class="template-item-title">图片：</p>
								<div class="template-item-content">
									<div class="image-wrap">
										<img @click="viewImage(item.smsvideoimg)" :src="item.smsvideoimg" />
									</div>
								</div>
							</div>
							<div class="template-item clear flex-grow" v-if="item.smsvideocontent">
								<p class="template-item-title">视频：</p>
								<div class="template-item-content">
									<div class="image-wrap">
										<video :src="item.smsvideocontent"></video>
										<div class="cover">
											<i @click="playVideo(item.smsvideocontent)" class="el-icon-video-play center"></i>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</template>
			<div v-if="tabIndex==1" style="margin-top: 12px;" class="clear flex flex-justify-between">
				<div class="message-form">
					<div class="clear">
						
						<!--<div class="form-item" v-if="obj.type==2">
							<p class="form-item-title">短信名称：</p>
							<div class="form-item-content">
								<el-input @input="titleEditFlag=true" v-model="obj.smstitle" placeholder="请输入短信名称"></el-input>
							</div>
						</div>-->
						<div class="form-item">
							<p class="form-item-title">短信内容：</p>
							<div class="form-item-content">
								<el-input :rows="6" v-if="scene=='addMessage'" type="textarea" v-model="obj.smstextcontent" placeholder="请输入短信内容" maxlength="62" show-word-limit></el-input>
								<template v-else>
									<el-input :rows="6" v-if="obj.merchant==4" type="textarea" v-model="obj.smstextcontent" placeholder="请输入短信内容" maxlength="62" show-word-limit></el-input>
									<el-input :rows="6" v-if="obj.merchant==0" type="textarea" v-model="obj.smstextcontentyddx" placeholder="请输入短信内容" maxlength="62" show-word-limit></el-input>
									<el-input :rows="6" v-if="obj.merchant==1" type="textarea" @keyup="dxEdit" v-model="obj.smstextcontentdx" placeholder="请输入短信内容" maxlength="62" show-word-limit></el-input>
									<el-input :rows="6" v-if="obj.merchant==2" type="textarea" @keyup="ydEdit" v-model="obj.smstextcontentyd" placeholder="请输入短信内容" maxlength="62" show-word-limit></el-input>
									<el-input :rows="6" v-if="obj.merchant==3" type="textarea" v-model="obj.smstextcontentlt" placeholder="请输入短信内容" maxlength="62" show-word-limit></el-input>
								</template>
								<p class="input-tip" style="width: 320px;">短信内容最长不能超过62个字符（含标点符号）</p>
							</div>
						</div>
						<div class="form-item" v-if="messageType==2">
							<p class="form-item-title">上传图片：</p>
							<div class="form-item-content">
								<image-uploader ref="imageUploader" :imageUrl="obj.smsvideoimg" @success="imageUploadSuccess" :fileSizeLimit="500" class="upload-wrapper" accept=".png,.jpg">
									<div class="upload-bg" v-if="!obj.smsvideoimg"></div>
									<template v-if="obj.smsvideoimg">
										<div class="operate-wrap flex flex-align-center flex-justify-arround">
											<img :src="change" @click="changeFile(0)" />
											<img :src="del" @click="delFile(0)" />
										</div>
									</template>
								</image-uploader>
								<p class="input-tip" style="width: 320px;">(只允许上传jpg/png，且不超过500kb的图片文件)</p>
							</div>
						</div>
						<div class="form-item" v-if="messageType==2">
							<p class="form-item-title">上传视频：</p>
							<div class="form-item-content">
								<video-uploader ref="videoUploader" :videoUrl="obj.smsvideocontent" @success="videoUploadSuccess" :fileSizeLimit="15*1024" class="upload-wrapper" accept=".mp4">
									<div class="upload-bg" v-if="!obj.smsvideocontent"></div>
									<template v-if="obj.smsvideocontent">
										<div class="operate-wrap flex flex-align-center flex-justify-arround">
											<img :src="change" @click="changeFile(1)" />
											<img :src="del" @click="delFile(1)" />
										</div>
									</template>
								</video-uploader>
								<p class="input-tip">(只允许上传mp4，且不超过1.5M的视频文件)</p>
							</div>
						</div>
					</div>
				</div>
				<div class="example-box">
					<template v-if="messageType==1">
						<p class="template-title">可选模板示例</p>
						<div class="template-list">
							<div v-if="groupname&&linkphone" class="default-template" @click="selectDefaultTemplate(item.smstextcontent)" v-for="(item,index) in defaultTemplateList2">
								{{item.smstextcontent.replace('{集团名称}', groupname).replace('{联系电话}', linkphone)}}
							</div>
							<div v-if="groupname&&!linkphone" class="default-template" @click="selectDefaultTemplate(item.smstextcontent)" v-for="(item,index) in defaultTemplateList2">
								{{item.smstextcontent.replace('{集团名称}', groupname)}}
							</div>
							<div v-if="!groupname&&linkphone" class="default-template" @click="selectDefaultTemplate(item.smstextcontent)" v-for="(item,index) in defaultTemplateList2">
								{{item.smstextcontent.replace('{联系电话}', linkphone)}}
							</div>
							<div v-if="!groupname&&!linkphone" class="default-template" @click="selectDefaultTemplate(item.smstextcontent)" v-for="(item,index) in defaultTemplateList2">
								{{item.smstextcontent}}
							</div>
						</div>
					</template>
					<template v-if="messageType==2&&scene!='addMessage'">
						<p style="line-height: 32px;">视频短信参考示例：</p>
						<img :src="videoExample" class="video-example" />
					</template>
				</div>
			</div>
		</template>
		<div class="flex" v-else>
			<div class="message-form flex-grow">
				<div class="form-item">
					<p class="form-item-title">短信名称：</p>
					<div class="form-item-content">{{obj.smstitle}}</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">短信内容：</p>
					<div class="form-item-content">{{obj.smstextcontent}}</div>
				</div>
				<div class="form-item" v-if="obj.smsvideoimg">
					<p class="form-item-title">图片：</p>
					<div class="form-item-content">
						<div class="upload-wrapper">
							<img @click="viewImage(obj.smsvideoimg)" :src="obj.smsvideoimg" />
						</div>
					</div>
				</div>
				<div class="form-item" v-if="obj.smsvideocontent">
					<p class="form-item-title">视频：</p>
					<div class="form-item-content">
						<div class="upload-wrapper">
							<video :src="obj.smsvideocontent"></video>
							<div class="cover">
								<i @click="playVideo(obj.smsvideocontent)" class="el-icon-video-play center"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>
</template>

<script>
	import ImageUploader from '@/components/ImageUploader'
	import VideoUploader from '@/components/VideoUploader'
	import change from '@/assets/images/change.png'
	import del from '@/assets/images/del.png'
	import videoExample from '@/assets/images/hangupMessage/img03.svg'

	const indexList = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
		'二十一', '二十二', '二十三', '二十四', '二十五', '二十六', '二十七', '二十八', '二十九', '三十',
		'三十一', '三十二', '三十三', '三十四', '三十五', '三十六', '三十七', '三十八', '三十九', '四十',
		'四十一', '四十二', '四十三', '四十四', '四十五', '四十六', '四十七', '四十八', '四十九', '五十'
	]

	export default {
		name: 'MessageEditor', //短信模板编辑器
		props: {
			circlecommonuid: {
				type: String,
				default: '',
			},
			step: {
				type: Number,
				default: 1,
			},
			scene: {
				type: String,
				default: 'addGroup', //addGroup 新建集团,addMember 添加成员,resetTemplate 重置模板,addMessage 新建模板
			},
			type: {
				type: Number,
				default: 1, //1 文字  2视频
			},
			merchantType: {
				type: Number | String,
				default: 4, //4 三网  5按运营商
			},
			phoneAndFeeInfo: {
				type: Object,
				default: () => {
					return {}
				},
			},
			//			smstitle: String,
			usetemplatedx: Number | String,
			hanguptemplateiddx: Number | String,
			smstextcontentdx: String,
			usetemplateyd: Number | String,
			hanguptemplateidyd: Number | String,
			smstextcontentyd: String,
			smstextcontent: String, //全网短信内容
			smstextcontentlt: String,
			smstextcontentyddx: String, //移动电信短信内容
			smsvideoimg: String,
			smsvideocontent: String,
			merchant: Number | String,
			groupname: String,
			linkphone: String,
		},
		components: {
			ImageUploader,
			VideoUploader,
		},
		data() {
			return {
				change,
				del,
				videoExample,

				loading: false,
				titleEditFlag: false,
				tabIndex: 0, //0已有模板  1新增模板
				messageType: this.type, //短信类型  1 文字  2视频
				obj: {},
				templateList: [],
				templateId: '',
				templateIdsw: '',
				templateIddx: '',
				templateIdyd: '',
				templateIdlt: '',
				extraText:'',//类型为联通或三网时额外的文字
				typeList: ['yddx', 'dx', 'yd', 'lt', 'sw', ],
				//				templateNum: 0,
				defaultTemplateList1: [{
					hanguptemplateid: 1,
					smstextcontent: '{集团名称}感谢您的致电！'
				}, {
					hanguptemplateid: 2,
					smstextcontent: '{集团名称}尊敬的来电用户，现诚挚的向您收集意见和建议，以便更好的进行我们的工作，感谢您对我们工作大力的支持！'
				}, {
					hanguptemplateid: 3,
					smstextcontent: '{集团名称}，感谢您的致电！顾客至上用心服务是我们的宗旨。竭诚为您提供优质贴心的服务！'
				}, {
					hanguptemplateid: 4,
					smstextcontent: '{集团名称}，欢迎您的致电，感谢您一直以来对我们的信任和支持，我们竭诚为您提供优质的产品和完善的服务，真诚期待与您的合作。'
				}],
				defaultTemplateList2: [{
					hanguptemplateid: 5,
					smstextcontent: '感谢您致电{集团名称}，我们秉承顾客至上 用心服务的宗旨。竭诚为您提供优质贴心的服务！'
				}, {
					hanguptemplateid: 6,
					smstextcontent: '感谢接听！优质高效一流服务，欢迎随时联系！'
				}, {
					hanguptemplateid: 7,
					smstextcontent: '感谢您的接听, {集团名称}竭诚为您服务，如有疑问请联系我们，联系电话{联系电话}'
				}, {
					hanguptemplateid: 8,
					smstextcontent: '{集团名称}感谢您的致电！'
				}, {
					hanguptemplateid: 9,
					smstextcontent: '{集团名称}尊敬的来电用户，现诚挚的向您收集意见和建议，以便更好的进行我们的工作，感谢您对我们工作大力的支持！'
				}, {
					hanguptemplateid: 10,
					smstextcontent: '{集团名称}，感谢您的致电！顾客至上用心服务是我们的宗旨。竭诚为您提供优质贴心的服务！'
				}, {
					hanguptemplateid: 11,
					smstextcontent: '{集团名称}，欢迎您的致电，感谢您一直以来对我们的信任和支持，我们竭诚为您提供优质的产品和完善的服务，真诚期待与您的合作。'
				}]
			}
		},
		watch: {
			"merchantType": {
				immediate: true,
				handler: async function(val) {
					if(val == 4) {
						this.obj.merchant = 4
					} else {
						if(this.phoneAndFeeInfo.ltnum) {
							this.obj.merchant = 3
						}
						if(this.phoneAndFeeInfo.ydnum) {
							this.obj.merchant = 2
						}
						if(this.phoneAndFeeInfo.dxnum) {
							this.obj.merchant = 1
						}
						if(this.scene == 'addGroup' && (this.phoneAndFeeInfo.ydnum || this.phoneAndFeeInfo.dxnum)) {
							this.obj.merchant = 0
						}

					}
					this.resetComponent()
				},
				deep: true,
			},
			"obj.merchant": function(newVal, oldVal) {
				if(this.scene == 'addGroup') {
					if(this.obj.merchant == 1 || this.obj.merchant == 2 || this.obj.merchant == 0) {
						this.editTypeChange(1)
						
					} else {
						this.tabIndex = 0
						this.editTypeChange(0)
						if(this.templateId==1){
							this.$nextTick(()=>{
								this.$refs.extraText[0].focus()
							})
						}
					}
				}
				if(this.scene == 'addMember'||this.scene == 'addMessage') {
					this.editTypeChange(0)
				}
				if(((this.scene == 'addGroup' || this.scene == 'addMember') && (newVal == 4 || oldVal == 4)) || this.scene == 'addMessage') {
					this.resetComponent()
				}
				this.getTemplateList()
			},
			merchant: function(val) {
				this.obj.merchant = val
			},
			//			"smstitle": function(val) {
			//				this.obj.smstitle = val
			//				if(this.tabIndex == 1 && !this.obj.smstitle && !this.titleEditFlag) {
			//					if(this.scene != 'resetTemplate') {
			//						this.obj.smstitle = (this.messageType == 1 ? '文字模板' : '图文模板') + (this.templateNum + 1)
			//					}
			//				}
			//			},
			"smstextcontent": function(val) {
				this.obj.smstextcontent = val
			},
			"smstextcontentdx": function(val) {
				this.obj.smstextcontentdx = val
			},
			"smstextcontentyddx": function(val) {
				this.obj.smstextcontentyddx = val
			},
			"smstextcontentyd": function(val) {
				this.obj.smstextcontentyd = val
			},
			"smstextcontentlt": function(val) {
				this.obj.smstextcontentlt = val
			},
			"smsvideoimg": function(val) {
				this.obj.smsvideoimg = val
			},
			"smsvideocontent": function(val) {
				this.obj.smsvideocontent = val
			},
			phoneAndFeeInfo: {
				deep: true,
				handler() {
					if(this.merchantType == 4) {
						this.obj.merchant = 4
					} else {

						if(this.phoneAndFeeInfo.ltnum) {
							this.obj.merchant = 3
						}
						if(this.phoneAndFeeInfo.ydnum) {
							this.obj.merchant = 2
						}
						if(this.phoneAndFeeInfo.dxnum) {
							this.obj.merchant = 1
						}
						if(this.scene == 'addGroup' && (this.phoneAndFeeInfo.ydnum || this.phoneAndFeeInfo.dxnum)) {
							this.obj.merchant = 0
						}
					}
				},
				immediate: true
			},
			obj: {
				deep: true,
				handler() {
					console.log(this.obj)
					this.$emit('change', this.obj)
				},
				immediate: false
			},
			type: {
				deep: true,
				handler() {
					this.templateId = ''
					this.messageTypeChange(this.type)
				},
				immediate: true
			},
		},
		computed:{
			 extraTextLength(){
			 	if(this.obj.merchant==4){
			 		console.log(this.obj.smstextcontent)
			 		return 62-this.smstextcontent.length
			 	}
			 	if(this.obj.merchant==3){
			 		return 62-(this.smstextcontentlt.length||this.smstextcontent.length)
			 	}
			 }
		},
		async mounted() {
			this.obj = {
				usetemplatedx: this.usetemplatedx,
				hanguptemplateiddx: this.hanguptemplateiddx,
				hanguptemplateidlt: '',
				smstextcontentdx: this.smstextcontentdx,
				usetemplateyd: this.usetemplateyd,
				hanguptemplateidyd: this.hanguptemplateidyd,
				smstextcontentyd: this.smstextcontentyd,
				smstextcontent: this.smstextcontent, //全网短信内容
				smstextcontentlt: this.smstextcontentlt,
				smstextcontentyddx: this.smstextcontentyddx, //移动电信短信内容
				smsvideoimg: this.smsvideoimg,
				smsvideocontent: this.smsvideocontent,
				merchant: this.scene == 'addGroup' ? 0 : this.scene == 'addMember' ? (this.merchant || 1) : this.scene == 'addMessage' ?1:(this.merchant || 1),
			}
			if(this.scene == 'addGroup' || this.scene == 'addMessage') {
				this.tabIndex = 1
			}
			//			if(this.scene == 'addGroup') {
			//				this.obj.smstitle = '文字模板1'
			//			}
			if(this.circlecommonuid) {
				//				await this.getTemplateNum()
				this.getTemplateList()

			}
			this.messageTypeChange(this.type)
		},
		methods: {
			async resetComponent() {
				//				await this.getTemplateNum()
				this.getTemplateList()
				//				if(this.tabIndex == 1) {
				//					if(this.scene == 'addMember' && !this.obj.smstitle) {
				//						this.obj.smstitle = (this.messageType == 1 ? '文字模板' : '图文模板') + (this.templateNum + 1)
				//					}
				//				}

			},
			editTypeChange(index) {
				this.templateId = this['templateId' + this.typeList[this.obj.merchant]]
				if(this.tabIndex != index) {
					this.tabIndex = index
					//					if(this.tabIndex == 1) {
					//						if(this.scene == 'addMember' && !this.obj.smstitle) {
					//							this.obj.smstitle = (this.messageType == 1 ? '文字模板' : '图文模板') + (this.templateNum + 1)
					//						}
					//					}
				}
			},
			async messageTypeChange(index) {
				if(this.messageType != index) {
					this.messageType = index
					if(index == 1) {
						this.obj.smsvideoimg = ''
						this.obj.smsvideocontent = ''
					}
					this.$emit('messageTypeChange', index)
					if(this.circlecommonuid) {
						//						await this.getTemplateNum()
						this.getTemplateList()
					}
				}
			},
			dxEdit() {
				this.obj.usetemplatedx = 0
				this.obj.hanguptemplateiddx = ''
				this.templateIddx = ''
			},
			ydEdit() {
				this.obj.usetemplateyd = 0
				this.obj.hanguptemplateidyd = ''
				this.templateIdyd = ''
			},
			getTemplateList() {
				this.loading = true
				console.log({
					pagenow: 1,
					shownum: 100000,
					templatestatus: 2,
					templatetype: this.messageType,
					circlecommonuid: this.circlecommonuid,
					merchant: this.obj.merchant,
				})
				this.$request.queryTemplateList({
					pagenow: 1,
					shownum: 100000,
					templatestatus: 2,
					templatetype: this.messageType,
					circlecommonuid: this.circlecommonuid,
					merchant: this.obj.merchant,
				}).then(res => {
					if(res.code == 0) {
						this.templateList = res.templateList
						if(!this.templateList.length && this.scene != 'resetTemplate') {
							if(this.obj.merchant!=4&&this.obj.merchant!=3){
								this.editTypeChange(1)
							}
						}
					}
					this.loading = false
					//					if(this.scene!='resetTemplate'&&this.tabIndex==1&&!this.titleEditFlag){
					//						this.obj.smstitle=(this.messageType==1?'文字模板':'图文模板')+(this.templateNum+1)
					//					}
				})
			},
			//			getTemplateNum() {
			//				return new Promise((resolve) => {
			//					this.$request.queryTemplateNum({
			//						circlecommonuid: this.circlecommonuid,
			//						templatetype: this.messageType,
			//						merchant:this.merchant,
			//					}).then(res => {
			//						if(res.code == 0) {
			//							this.templateNum = res.num
			//							if(this.tabIndex == 1) {
			//								if(this.scene != 'resetTemplate') {
			//									this.obj.smstitle = (this.messageType == 1 ? '文字模板' : '图文模板') + (this.templateNum + 1)
			//								}
			//							}
			//						}
			//						resolve()
			//					})
			//				})
			//			},
			selectTemplate(item) {
				
				this.templateId = item.hanguptemplateid
				if(this.obj.merchant == 4) {
					this.obj.smstextcontent = item.smstextcontent
				} else {
					this.obj['smstextcontent' + this.typeList[this.obj.merchant]] = item.smstextcontent
				}
				if(this.obj.merchant == 1) {
					this.obj.usetemplatedx = 1
					this.obj.hanguptemplateiddx = item.hanguptemplateid
				}
				if(this.obj.merchant == 2) {
					this.obj.usetemplateyd = 1
					this.obj.hanguptemplateidyd = item.hanguptemplateid
				}
				if(this.obj.merchant == 3) {
					this.obj.hanguptemplateidlt = item.hanguptemplateid
				}
				this.obj.smstitle = item.smstitle
				this.obj.smsvideoimg = item.smsvideoimg
				this.obj.smsvideocontent = item.smsvideocontent
				this['templateId' + this.typeList[this.obj.merchant]] = item.hanguptemplateid
				if(this.templateId==1){
					this.$nextTick(()=>{
						this.$refs.extraText[0].focus()
					})
				}
			},
			selectDefaultTemplate(text) {
				if(this.obj.merchant == 1) {
					this.templateIddx = ''
					this.obj.usetemplatedx = 0
					this.obj.hanguptemplateiddx = ''
				}
				if(this.obj.merchant == 2) {
					this.templateIdyd = ''
					this.obj.usetemplateyd = 0
					this.obj.hanguptemplateidyd = ''
				}
				if(this.obj.merchant == 4) {
					this.obj.smstextcontent = text
				} else {
					this.obj['smstextcontent' + this.typeList[this.obj.merchant]] = text
				}
			},
			imageUploadSuccess(img) {
				if(img.code == 0) {
					this.obj.smsvideoimg = img.uploadpath
				}

			},
			videoUploadSuccess(video) {
				if(video.code == 0) {
					this.obj.smsvideocontent = video.uploadpath
				}
			},
			changeFile(index) {
				if(index == 0) {
					this.$refs.imageUploader.selectFile()
				} else {
					this.$refs.videoUploader.selectFile()
				}
			},
			delFile(index) {
				if(index == 0) {
					this.$refs.imageUploader.clearFile()
					this.$nextTick(() => {
						this.obj.smsvideoimg = ''
					})
				} else {
					this.$refs.videoUploader.clearFile()
					this.$nextTick(() => {
						this.obj.smsvideocontent = ''
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		border: 1px solid #ddd;
		border-radius: 4px;
		margin-top: 10px;
		padding: 12px;
	}
	
	.edit-types {
		height: 36px;
		.edit-type {
			width: 80px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			color: #333;
			font-size: 16px;
			cursor: pointer;
			margin-right: 30px;
			float: left;
		}
		.selected-type {
			color: #0088EA;
			border-bottom: 2px solid #0088EA;
		}
	}
	
	.template-title {
		line-height: 24px;
		text-align: center;
		font-size: 16px;
		margin-bottom: 12px;
	}
	
	.no-data {
		text-align: center;
		line-height: 260px;
		font-size: 16px;
		color: #999;
	}
	
	.template-list {
		height: 332px;
		overflow-y: auto;
		margin-top: 12px;
		.template-box {
			width: 100%;
			padding: 8px 13px;
			border: 1px solid #EEEEEE;
			border-radius: 4px;
			margin-bottom: 20px;
			color: #333;
			cursor: pointer;
			&:last-child {
				margin-bottom: 0;
			}
			.template-item {
				line-height: 24px;
			}
			.template-item-title {
				width: 86px;
				text-align: right;
				padding-right: 4px;
				float: left;
			}
			.template-item-content {
				margin-left: 86px;
				>>>.el-input__inner{
					height: 24px;
					line-height: 24px;
					display: block;
					font-size: 14px;
				}
				
				.image-wrap {
					width: 100px;
					height: 100px;
					position: relative;
					background: #f5f5f5;
					margin-top: 4px;
					img,
					video {
						width: 100%;
						height: 100%;
						display: block;
					}
					.cover {
						position: absolute;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
						.el-icon-video-play {
							width: 40px;
							height: 40px;
							color: #fff;
							font-size: 40px;
						}
					}
				}
			}
		}
		.selected-template {
			background: #0088EA;
			color: #fff;
			border-color: #0088EA;
		}
	}
	
	.message-form {
		width: 430px;
		background: #F5F5F5;
		border-radius: 4px;
		padding: 18px;
		.form-item {
			display: block;
			margin-right: 0;
			position: relative;
			.form-item-title {
				width: 91px;
				font-size: 16px;
				position: absolute;
			}
			.form-item-content {
				width: 100%;
				font-size: 16px;
				padding-left: 91px;
				>>>.el-radio__label {
					padding-left: 4px;
				}
				.input-tip {
					color: #FF0000;
					font-size: 14px;
					line-height: 30px;
				}
				.info-para {
					line-height: 32px;
					font-size: 18px;
				}
				>>>.el-input__inner,
				.el-textarea {
					font-size: 16px;
				}
				.upload-wrapper {
					width: 100px;
					height: 100px;
					margin-top: 8px;
					position: relative;
					background: #fff;
					>img,
					>video {
						width: 100%;
						height: 100%;
					}
					.el-icon-video-play {
						width: 40px;
						height: 40px;
						color: #fff;
						font-size: 40px;
					}
					.upload-bg {
						width: 100%;
						height: 100%;
						background: url(../assets/images/upload-bg.png);
					}
					&:hover {
						.operate-wrap {
							display: flex;
						}
					}
					.operate-wrap {
						position: absolute;
						width: 100%;
						height: 24px;
						left: 0;
						bottom: 0;
						background: rgba(255, 0, 0, 0.8);
						opacity: 0.8;
						display: none;
						padding: 0 10px;
						z-index: 10;
					}
					.operate-wrap .operate {
						width: 20px;
						height: 20px;
						cursor: pointer;
					}
				}
			}
		}
	}
	
	.step2 {
		.message-form {
			background: inherit;
			float: none;
			padding: 0;
		}
		.form-item-title {
			font-weight: normal;
		}
	}
	
	.example-box {
		width: 362px;
	}
	
	.default-template {
		padding: 8px 10px;
		width: 100%;
		line-height: 18px;
		background: #fff;
		border: 1px solid #eee;
		border-radius: 4px;
		-webkit-transition: all .3s;
		transition: all .3s;
		margin-bottom: 14px;
		color: #666;
		cursor: pointer;
		position: relative;
		font-size: 12px;
		&:hover {
			background: #f5f5f5;
			color: #333;
		}
	}
</style>